<script setup>
import { ref } from 'vue'
import api from '@/api'
import { showNotify } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import useAuthStore from '@/store/auth'

const $route = useRoute()
const $router = useRouter()
const $authStore = useAuthStore()

const loading = ref(false)
const formData2 = ref({
  username: $authStore.username,
  password: '',
  new_password: '',
  new_password_again: '',
})

const formSubmit = async () => {
  if (!formData2.value.password) {
    showNotify({ type: 'danger', message: '请输入旧密码' })
    return
  }
  if (!formData2.value.new_password) {
    showNotify({ type: 'danger', message: '请输入新密码' })
    return
  }
  if (!formData2.value.new_password_again) {
    showNotify({ type: 'danger', message: '请确认新密码' })
    return
  }
  if (formData2.value.new_password != formData2.value.new_password_again) {
    showNotify({ type: 'danger', message: '两次新密码输入不一致' })
    return
  }
  loading.value = true
  try {
    const res = await api.post('/user/updatePassword', formData2.value)
    showNotify({ type: 'success', message: res.message })
    // setTimeout(() => {
    $router.go(-1)
    // }, 1000)
  } catch (error) {
    console.error(error)
  }
  loading.value = false
}

const getCode = async () => {
  if (counting.value) {
    return false
  }
  if (!formData1.value.username) {
    showNotify({ type: 'danger', message: '请输入手机号' })
    return
  }
  try {
    const res = await api.post('/auth/sendCode', {
      phone: formData1.value.username,
      event: 'user_login',
    })
    showNotify({ type: 'success', message: res.message })
    console.log('res', res)
    countDown(60)
  } catch (error) {
    console.error(error)
  }
}

// 验证码倒计时
const countDown = (count) => {
  let that = this
  if (count === 0) {
    timeCountDownTop.value = '获取验证码'
    counting.value = false
    return false
  }
  counting.value = true
  timeCountDownTop.value = count + 's'
  setTimeout(function () {
    count--
    countDown(count)
  }, 1000)
}

const switchFormType = async (e) => {
  formType.value = e
}

if ($route.query.id) {
  getCompanyInfo()
}
</script>

<template>
  <div class="page-login">
    <van-form class="form-login"
              @submit="formSubmit">

      <div class="mb50">
        <div class="title">修改密码</div>
      </div>

      <van-cell-group inset>
        <van-field v-model="formData2.password"
                   label="旧密码"
                   name="login_password"
                   type="password"
                   placeholder="输入旧密码" />
        <van-field v-model="formData2.new_password"
                   label="新密码"
                   name="login_password"
                   type="password"
                   placeholder="输入新密码" />
        <van-field v-model="formData2.new_password_again"
                   label="确认新密码"
                   name="login_password"
                   type="password"
                   placeholder="输入新密码" />
      </van-cell-group>

      <div class="footer">
        <van-button block
                    type="primary"
                    native-type="submit"
                    :loading="loading">确认</van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped lang="scss">
.page-login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f7f8fa;
  .form-login {
    width: 100%;
  }
  .logo {
    display: block;
    height: 90px;
    margin: 0 auto;
    border-radius: 4px;
    margin-top: -150px;
    margin-bottom: 50px;
  }
  .title {
    color: #1d2129;
    font-size: 22px;
    text-align: center;
  }
  .subtitle {
    color: #86909c;
    font-size: 16px;
    text-align: center;
    margin-top: 8px;
  }
  .footer {
    padding: 16px;
    margin-top: 4px;
  }
}

.mb50 {
  margin-bottom: 50px;
}

.switch_text {
  padding: 0 16px;
  margin-top: 20px;
  font-size: 12px;
  color: #aaa;
}

.btn_div {
  position: relative;
  height: 24px;
  top: -4px;
}
</style>
